<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Histogram</title>
    <link rel="stylesheet" href="style.css" />

<body bgcolor="#f5f5f5">

<center>
    <div id="container" style="width:890px">
        <div id="header" style="background-color:#d15be2;">
            <h1 style="margin-bottom:0;">
                <center>
                    <font color = "green">
                        <p> Histogram  </p>
                    </font>
                </center>
            </h1>
        </div>
</center>

<script src="d3.v3.min.js"></script>
<script src="Data.js"></script>
<script src="GeoLib2.js"></script>
<script src="InteractionLib.js"></script>
<script>
    d3.csv("AttdcGradeDataMSU.csv", function (csv) {

    var histogram=Main_Bound_region;
    histogram.svg_width=900;
    histogram.svg_height=400;
    histogram.g_height=350;
   histogram.g_width=800;
    histogram.SVG("body").call(Interaction.Zoom(1,8,'g1'));
    histogram.G("svg");
    histogram.G("g0").attr("transform", "translate(50,0)");

        var traits1 = keys_of_objects(csv);
        var data = [],vkey=[],vvalue=[],mydata=[];
        values_of_key(csv,traits1[2],data); //x
        var datas = frequancy_object(data); //height

        var traits2 = keys_of_objects(datas);
        values_of_key(datas,traits2[0],vkey);
        values_of_key(datas,traits2[1],vvalue);

        var width=d3.select("#g1").attr("width");
        var height=d3.select("#g1").attr("height");
        var x=d3.scale.linear()
                .domain([d3.max(datas, function (d) {
                    return +d[traits2[0]];
                }), d3.min(datas, function (d) {
                    return +d[traits2[0]];
                })])
                .range([0,width]);
        var y =d3.scale.linear()
                .domain([d3.max(datas, function (d) {
                    return +d[traits2[1]];
                }), d3.min(datas, function (d) {
                    return +d[traits2[1]];
                })])
                .range([height,0]);
        for(var i=0;i<vkey.length;i++)
        Generate_DataObject_Rect(mydata,x(vkey[i]),0,1,vvalue[i]*40,0,0,"white","black",1,1);
        //console.log(mydata);


        Geo_Primitives.DrawRect(mydata,'g1').attr("transform", function(d) {
            return "translate(800,350)rotate(-180)"
        });


        Geo_Primitives.Draw_Axis(datas,traits2[0],traits2[0],0,0,'h',20,'g1').attr("class","y axis");


    });

</script>